<template>
    <div>
        <el-dialog
            @close="ConfirmClose"
            :before-close="handleClose"
            title="Add Subchance"
            :visible.sync="visible">

            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                     label-position="left">
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="chanceId" label-width="160px" prop="chanceId">
                        <el-input v-model="chanceId" :disabled='true' clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="subchanceName" label-width="160px" prop="subchanceName">
                        <el-input v-model="formData.subchanceName" placeholder="Please Enter" clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="type" label-width="160px" prop="subchanceType">
                        <el-select v-model="formData.subchanceType" placeholder="Please Enter" filterable clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.chanceTypeOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="product" label-width="160px" prop="subchanceProduct">
                        <el-select v-model="formData.subchanceProduct" placeholder="Please Enter" filterable clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.productTypeOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>

                </el-row>
                <el-row type="flex" justify="start" align="top">

                    <el-form-item label="dept" label-width="160px" prop="subchanceDept">
                        <el-select v-model="formData.subchanceDept" placeholder="Please Enter" filterable clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="money" label-width="160px" prop="subchanceMoney">
                        <el-input v-model="formData.subchanceMoney" placeholder="Please Enter" clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>

                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="ConfirmClose">Cancel</el-button>
                <el-button type="primary" @click="handleConfirm">Confirm</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
export default {
    name: "EditAddSubchanceDialog",
    props: ['visible','close','callback','options'],

    data() {
        return {
            chanceId: 3,
            formData: {
                subchanceId: null,
                subchanceCode: null,
                subchanceName: null,
                subchanceType: null,
                subchanceProduct: null,
                subchanceDept: null,
                subchanceCurrency: null,
                subchanceMoney: null
            },
            rules: {

                subchanceName: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                subchanceType: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],
                subchanceProduct: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                subchanceDept: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],
                subchanceCurrency: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],
                subchanceMoney: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
            },

        }
    },
    methods: {

        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?',{cancelButtonText:"cancel",confirmButtonText:"comfirm"})
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },
        ConfirmClose() {
            this.$refs['elForm'].resetFields();
            this.close()
        },

        handleConfirm() {

            console.log(this.formData)
            this.$refs['elForm'].validate(valid => {
                if (!valid) return

                    let subchanceAdd = {
                        "chanceId" : this.chanceId,
                        "subchance" : this.formData
                    }
                    // console.log(this.formData.trackId)

                    this.$axios.post(
                        '/chance/chance/addSubchance',
                        subchanceAdd

                    ).then(res => {
                        console.log(res.data)

                console.log('before close', this.formData);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.formData))

                this.$refs['elForm'].resetFields();
                this.callback(dd);

                this.$message({
                    message: "subchance add successfully!",
                    type: "success",
                });
                this.ConfirmClose()


                    });
            })
        },
        setData(chanceId) {
            this.chanceId = chanceId
        },
    }

}
</script>

<style scoped>

</style>